<template>
  <div class="login">
    <p>注册</p>
    <input placeholder="请输入用户名" type="text" class="username" v-model="username" />
    <input placeholder="请输入密码" type="password" class="userpasd" v-model="userpasd" />
    <button @click="btnRegist()">注册</button>
  </div>
</template>
<script>
import { apiAddress } from "@/utils/api"
export default {
  data() {
    return {
      username: "",
      userpasd: ""
    };
  },
  methods: {
    btnRegist() {
      if (this.username == "") {
        this.$layer.msg("用户名不能为空");
      } else if (this.userpasd == "") {
        this.$layer.msg("密码不能为空");
      } else if (this.userpasd.length <= 5) {
        this.$layer.msg("请输入大于6位的密码");
      } else {
      	apiAddress({
      		username: this.username,
          password: this.userpasd
      	}).then(obj => {
      		  console.log(obj);
            if (obj.data.code == 0) {
              this.$layer.msg(obj.data.msg);
            } else if (obj.data.code == 1) {
              this.$layer.msg(obj.data.msg);
              setTimeout(() => {
                this.$router.push({
                  path: "/"
                });
              }, 2000);
            }
      	})
      }
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.login {
  width: 100%;
}
.login p {
  width: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  color: #000;
}
.username,
.userpasd {
  width: 80%;
  margin-left: 10%;
  line-height: 45px;
  border: 1px solid #999;
  font-size: 14px;
  color: #666;
  text-indent: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  outline: none;
}
button {
  width: 80%;
  margin-left: 10%;
  line-height: 45px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: darkblue;
  border: 0;
  border-radius: 5px;
  outline: none;
}
.login_bottom {
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
}
.login_bottom span {
  line-height: 45px;
  font-size: 14px;
  color: #888;
  padding-left: 20px;
}
.login_bottom span:nth-of-type(2) {
  padding-right: 20px;
}
</style>